<template>
	<view class="back-top" v-show="isShow"  @click="toTop">
		<image class="back-top-img"
			src="https://cdn-cos-ke.myoed.com/ke_proj/mobilev2/m-core/03de0936a7aafee76646b8b2d5fa5b4f.png" mode="">
		</image>
	</view>
</template>

<script lang="ts" setup>
	import { onLoad } from "@dcloudio/uni-app"
	import { ref } from 'vue'
	const isShow = ref(true)
	
	// 注册一个自定义事件用来点击回到顶部图标
		onLoad(()=>{
			uni.$on('pageScroll',(scrollTop)=>{
				if(scrollTop > 300){
					isShow.value = true 
				}else {
					isShow.value = false 
				}
			})
		})
	// 点击图片的时候回到顶部
		const toTop = ()=>{
			uni.pageScrollTo({
				scrollTop:0
			})
		}
	
</script>

<style lang="less" scoped>
	.back-top {
		width: 100upx;
		height: 100upx;
		position: fixed;
		right: 50upx;
		bottom: 20upx;

		.back-top-img {
			width: 100%;
			height: 100%;
		}
	}
</style>